<template>
  <div>
    <NavBar />

    <!-- 内容 -->
    <div class="content">
      <div class="video">
        <video :src="info.content" controls="controls"></video>
      </div>
      <div class="info">
        <p class="hot" v-if="info.category">
          <span class="title">{{ info.category.title }}</span>
          <span>{{ info.name }}</span>
        </p>
        <p class="data" v-if="info.userinfo">
          <span class="username">{{ info.userinfo.name }}</span>
          <span class="Watched">468万观看</span>
          <span class="barrage">1.7万弹幕</span>
          <span class="time">{{ info.date }}</span>
        </p>
        <div class="toolbar">
          <p class="left">
            <span><i class="fa fa-star"></i>收藏</span>
            <span><i class="fa fa-download"></i>缓存</span>
            <span><i class="fa fa-share"></i>分享</span>
          </p>
          <p class="right">
            <span class="comment"><i class="fa fa-comment"></i>{{commentlen}}评论</span>
          </p>
        </div>
      </div>

      <!-- 推荐视频 -->
      <HotVideoList :hotVideos="hotVideos" />
      <!-- 评论留言头部 -->
      <CommentTitle :commentlen="commentlen" @addComment="addFirstComment" ref="ctitle"/>
      <!-- 评论留言组件 -->
      <CommentList :comments="comments" @replyComment="replyComment"/>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/VideoNavbar";
import CommentTitle from './child/CommentTitle'
import CommentList from "./child/CommentList";
import HotVideoList from "./child/HotVideoList";
import { reqVideoDetail, reqHotVideo, reqrecommended, reqAddCommended } from "../../api/video";
export default {
  name: "videodetailPage",
  data() {
    return {
      info: {},
      comments: [],
      hotVideos: [],
      commentlen: 0, // 评论条数
      date: "",
      pid: null,
      aid: ""
    };
  },
  created() {
    this.getVideoDetail();
    this.getHotVideo();
    this.getRecommended();
  },
  watch: {
    $route(){
      this.getVideoDetail()
      this.getHotVideo();
      this.getRecommended();
    }
  },
  methods: {
    /**
     * 数据请求
     */
    async getVideoDetail() {
      const id = this.$route.params.id;
      const result = await reqVideoDetail(id);
      this.info = result[0];
    },

    async getHotVideo() {
      const result = await reqHotVideo();
      this.hotVideos = result;
    },

    async getRecommended() {
      const id = this.$route.params.id;
      const result = await reqrecommended(id);
      this.commentlen = result.length;
      // 递归改变评论回复的层级数据
      this.comments = this.changeRecommend(result);
    },

    /**
     * 方法
     */
    // 递归评论列表
    changeRecommend(data) {
      function fn(temp) {
        let arr = [];
        for (var i = 0; i < data.length; i++) {
          if (data[i].parent_id == temp) {
            arr.push(data[i]);
            data[i].child = fn(data[i].comment_id);
          }
        }
        return arr;
      }
      return fn(null);
    },


    // 添加评论
    async addFirstComment(content){
      const id = localStorage.getItem("id")
      let { date, pid, aid} = this
      date = this.getDate(new Date())
      aid = this.$route.params.id
      if(!content){
        return this.$toast('请输入评论内容')
      }
      const result = await reqAddCommended(id, content, date, pid, aid)
      console.log(result)
      /* if(result.status === 200){
        this.$toast('发送评论成功')
        // 刷新页面
        this.getRecommended()
      } */
      this.$toast('发送评论成功')
        // 刷新页面
      this.getRecommended()
    },

    // 改变时间
    getDate(date) {
      const m = (date.getMonth() + 1).toString().padStart(2, "0");
      const d = date
        .getDate()
        .toString()
        .padStart(2, "0");
      console.log(`${m}-${d}`);
      return `${m}-${d}`;
    },

    // 点击一级评论回复按钮，聚焦文本框
    replyComment(id){
      this.pid = id
      console.log(id)
      this.$refs.ctitle.addInput()
    }
  },
  components: {
    NavBar,
    CommentTitle,
    CommentList,
    HotVideoList
  }
};
</script>
<style lang="less" scoped>
.content {
  margin-top: 44px;
  .video {
    width: 100%;
    video {
      width: 100%;
    }
  }
  .info {
    padding: 10px;
    font-size: 14px;
    .hot {
      margin: 0 0 10px;
      box-sizing: border-box;
      font-size: 16px;
      .title {
        color: #02a774;
        margin: 0 15px;
        font-size: 13px;
      }
    }
    .data {
      color: #aaa;
      .username {
        color: #666;
      }
      span {
        display: inline-block;
        margin: 5px 10px;
      }
    }
    .toolbar {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      span {
        color: #757575;
        margin-right: 15px;
        i {
          margin-right: 3px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
